<!--
 * @author: sanbao
 * @Date: 2022-07-30 15:27:03
-->
<style lang='scss' scoped>
.my_list {
  .kong {
    text-align: center;
    font-size: 30px;
    padding: 30px 0;
  }
  margin: 0 10px;
  .warp {
    display: flex;
    flex-wrap: wrap;
    .list {
      width: 18.55%;
      box-sizing: border-box;
      background-color: #fff;
      height: calc(710px / 2);
      text-align: center;
      margin-left: 20px;
      transition: all 0.3s;
      position: relative;
      .flex {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 30px;
      }
      img {
        vertical-align: middle;
        width: 80%;
        padding: 30px;
        box-sizing: border-box;
      }
      &:nth-child(-n + 4) {
        margin-bottom: 20px;
      }
      p {
        span {
          display: inline-block;
          margin: 10px;
        }
        > :nth-child(1) {
          color: red;
        }
      }
    }
    .list:hover {
      box-shadow: 0 16px 32px 0 rgb(69, 66, 66); /* 鼠标悬浮时盒子出现的阴影 */
      transform: translate(0, -10px); /* 鼠标悬浮时盒子上移10px */
    }
  }
}
</style>

<template>
  <div class="my_list">
    <div v-if="list.length">
      <div class="warp">
        <div
          class="list"
          v-for="(item, index) in list"
          :key="index"
          @click.stop="$router.push(`/details?id=${item.product_id}`)"
        >
          <el-icon
            v-if="delete"
            class="flex"
            @click.stop="$emit('del', item.product_id)"
          >
            <CloseBold />
          </el-icon>
          <img
            :src="'http://101.132.181.9:3000/' + `${item.product_picture}`"
          />
          <h4>{{ item.product_name }}</h4>
          <span>{{ item.product_title }}</span>
          <p>
            <span>{{ item.product_selling_price }}元</span>
            <span>
              <s>{{ item.product_price }}元</s>
            </span>
          </p>
        </div>
      </div>
    </div>
    <div class="kong" v-else>暂时没有数据哦！！！</div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { CloseBold } from "@element-plus/icons-vue";

export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
    delete: Boolean,
  },
  components: { CloseBold },
  setup() {
    return {};
  },
};
</script>
